<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>自动报表展示</title>
    <link rel="stylesheet" href="../../assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../assets/module/admin.css?v=318"/>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        #xTable2 + .layui-table-view .layui-table-click, #xTable2 + .layui-table-view .layui-table-hover, #xTable2 + .layui-table-view .layui-table tbody tr:hover {
            background: transparent;
        }
    </style>
</head>
<body>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card" id="search_form">
        <div class="layui-card-body">

            <!-- 表格工具栏 -->
            <form class="layui-form toolbar">
                <div class="layui-form-item">

                    <div class="layui-inline">
                        <label class="layui-form-label">起始日期</label>
                        <div class="layui-input-inline">
                            <input type="text" name="minDate" id="minDate" lay-verify="date" placeholder="yyyy-MM-dd"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">截止日期</label>
                        <div class="layui-input-inline">
                            <input type="text" name="maxDate" id="maxDate" lay-verify="date" placeholder="yyyy-MM-dd"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">账&emsp;&emsp;号:</label>
                        <div class="layui-input-inline">
                            <input name="username" class="layui-input" placeholder="输入账号"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">用&nbsp;&nbsp;户&nbsp;&nbsp;名:</label>
                        <div class="layui-input-inline">
                            <input name="nickName" class="layui-input" placeholder="输入用户名"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">手&nbsp;&nbsp;机&nbsp;&nbsp;号:</label>
                        <div class="layui-input-inline">
                            <input name="phone" class="layui-input" placeholder="输入用户名"/>
                        </div>
                    </div>
                    <div class="layui-inline form-search-show-expand">
                        <label class="layui-form-label">性&emsp;&emsp;别:</label>
                        <div class="layui-input-inline">
                            <select name="sex">
                                <option value="">所有</option>
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline form-search-show-expand">
                        <label class="layui-form-label">状&emsp;&emsp;态:</label>
                        <div class="layui-input-inline">
                            <select name="state">
                                <option value="">所有</option>
                                <option value="0">正常</option>
                                <option value="1">冻结</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline form-search-show-expand">
                        <label class="layui-form-label">注册时间:</label>
                        <div class="layui-input-inline">
                            <input id="tbAdvSelDate" name="createTime" class="layui-input icon-date"
                                   placeholder="选择注册时间" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="layui-inline">&emsp;
                        <button class="layui-btn icon-btn" lay-filter="tbAdvTbSearch" lay-submit>
                            <i class="layui-icon">&#xe615;</i>搜索
                        </button>


                        <a class="layui-btn form-search-expand" search-expand>
                            展开 <i class="layui-icon layui-icon-down"></i></a>
                    </div>
                </div>
            </form>

            <div id="file-list-group" class="layui-hide"><input type="file" id="importStockExcel"></div>


        </div>
    </div>
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <div class="layui-tab-content">
                <div class="layui-form-item">
                    <div class="layui-inline pull-left">
                        <button class="layui-btn icon-btn" id="addStockDetail"><i
                                class="layui-icon">&#xe654;</i>添加
                        </button>
                        <button id="file-btn-upload" class="layui-btn layui-btn layui-btn-normal icon-btn">
                            <i class="layui-icon">&#xe681;</i>导入
                        </button>
                        <button id="tbBasicExportBtn" class="layui-btn icon-btn" type="button">
                            <i class="layui-icon">&#xe67d;</i>导出
                        </button>
                        <button class="layui-btn layui-btn-danger icon-btn"><i
                                class="layui-icon">&#xe640;</i>删除
                        </button>
                    </div>
                </div>
                 <table id="xTable1" lay-filter="xTable1"></table>
            </div>
        </div>
    </div>

</div>
</div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body text-danger">
            表格扩展tableX模块还封装了导出xlsx格式的excel数据、绑定行鼠标右键、post方式下载文件(支持传参数，可用于请求后端导出excel下载)等实用功能。
        </div>
    </div>
</div>



<!-- 表格操作列 -->
<script type="text/html" id="search_form_body">

</script>

<!-- js部分 -->
<script type="text/javascript" src="../../assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="../../assets/js/common.js?v=318"></script>
<script>
    layui.use(['layer','laydate','form','dropdown', 'element', 'util', 'table', 'tableX', 'format', 'admin', 'upload', 'fileChoose'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var element = layui.element;
        var util = layui.util;
        var table = layui.table;
        var tableX = layui.tableX;
        var format = layui.format;
        var admin = layui.admin;
        var upload = layui.upload;
        var fileChoose = layui.fileChoose;
        var laydate = layui.laydate;
        var form = layui.form;
        var dropdown = layui.dropdown;

        // $("#search_form").html($("#search_form_body").html());


        /* 渲染时间选择 */
        laydate.render({
            elem: '#minDate'
        });
        laydate.render({
            elem: '#maxDate'
        });


        // 导出excel
        $('#tbBasicExportBtn').click(function () {
            var checkRows = table.checkStatus('tbBasicTable');
            if (checkRows.data.length === 0) {
                layer.msg('请选择要导出的数据', {icon: 2});
            } else {
                table.exportFile(insTb.config.id, checkRows.data, 'xls');
            }
        });






        // 前端分页
        var table1 = tableX.renderFront({
            elem: '#xTable1',
            url: '/valueRecommend/queryStockDetailsByCondition',
            page: {groups: 10},
            async:false,
            cellMinWidth: 100,
            title: '个股报告期指标',
            cols: [[
                {type: 'checkbox'},
                {field: 'stockCode', title: '股票代码', sort: false},
                {field: 'stockName', title: '股票名称', sort: false},
                {
                    field: 'reportTime', templet: function (d) {
                        return util.toDateString(d.reportTime);
                    }, title: '报告时间', sort: true
                },
                {field: 'pe', title: '市盈率', sort: true},
                {field: 'pb', title: '市净率', sort: true},
                {field: 'price', title: '价格', sort: true},
                {field: 'industryName', title: '行业名称', sort: true}
            ]]
        });


        /* 表格搜索 */
        form.on('submit(tbBasicTbSearch)', function (data) {
            table1.reload({where: data.field, page: {curr: 1}});
            return false;
        });

        // /* 表格工具条点击事件 */
        // table1.on('tool(tbBasicTable)', function (obj) {
        //     var data = obj.data; // 获得当前行数据
        //     if (obj.event === 'edit') { // 修改
        //         layer.msg('点击了修改');
        //     } else if (obj.event === 'del') { // 删除
        //         layer.msg('点击了删除');
        //     } else if (obj.event === 'view') { // 查看
        //         layer.msg('点击了查看');
        //     } else if (obj.event === 'reset') { // 重置密码
        //         layer.msg('点击了重置密码');
        //     } else if (obj.event === 'lock') { // 锁定
        //         layer.msg('点击了锁定');
        //     }
        //     dropdown.hideAll();
        // });

        // 上传
        upload.render({
            elem: '#file-btn-upload',
            url: '/valueRecommend/importStockInfo',   // 上传文件的url
            accept: 'file',
            before: function (obj) {
                // //预读本地文件示例，不支持ie8
                // obj.preview(function (index, file, result) {
                //     $('#importStockExcel').attr('src', result); //图片链接（base64）
                // });
            }
            , done: function (res) {
                //如果上传失败
                if (res.code < 0) {
                    return layer.msg('上传失败');
                }else if(res.code >= 0){  //上传成功
                    return layer.msg('上传成功');
                }
                table1.reload('xTable1', {   // 按表单设置的参数请求表格接口，从第一页重新加载展示
                    url: '/valueRecommend/queryStockDetailsByCondition',
                    method: "get"
                });

            }
            , error: function () {
                // 演示失败状态，并实现重传
                var importStockExcel = $('#importStockExcel');
                importStockExcel.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                importStockExcel.find('.demo-reload').on('click', function () {
                    upload.upload();
                });
            }
        });

        // 弹窗选择
        $('#file-btn-choose').click(function () {
            fileChoose.open({
                fileUrl: '',
                listUrl: '',
                num: 1,   // 最多选择的文件数
                dialog: {
                    offset: '60px'
                },
                onChoose: function (urls) {
                    layer.msg('你选择了：' + JSON.stringify(urls), {icon: 1});
                }
            });
        });





        // 添加股票信息
        $('#addStockDetail').on('click', function () {
            var layIndex = admin.open({
                type: 2,
                title: '添加股票数据',
                content: 'userForm.html',
                end: function () {  // 监听弹窗关闭
                    if (admin.getLayerData(layIndex, 'formOk')) {  // 判断表单操作成功标识
                        table1.reload();  // 成功刷新表格
                    }
                }
            });
        });


        setTimeout(function () {
            table.resize('xTable1');
        }, 200);

    });
</script>
</body>
</html>
